import React from "react";
import {
  Card,
  Form,
  Button,
  Table,
  Modal,
  Input,
  message,
  Popconfirm,
  Image,
} from "antd";
import { PlusOutlined, EditOutlined, DeleteOutlined } from "@ant-design/icons";
import { resetImg } from "../utils/tool";
import { useState, useEffect } from "react";
import FileUpload from "../components/FileUpload";
import { loadGong, updataGong, deleteGong, addGong } from "../services/gonggao";
function GaongGao() {
  const [list, setList] = useState([]);
  const [page, setPage] = useState(1);
  const [imageUrl, setImageUrl] = useState("");
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [myForm] = Form.useForm();
  const [total, setTotal] = useState([]);
  const [editId, setEditId] = useState("");
  const { TextArea } = Input;
  const columns = [
    {
      title: "序号",
      align: "center",
      with: 50,
      render(d, r, index) {
        return <span>{index + 1}</span>;
      },
    },
    {
      title: "名字",
      dataIndex: "name",
      key: "name",
      align: "center",
    },
    {
      title: "图片",
      align: "center",
      render(d) {
        return (
          <Image
            src={resetImg(d.coverImage)}
            alt={d.name}
            style={{ width: 80 }}
          />
        );
      },
    },
    {
      title: "简介",
      dataIndex: "desc",
      key: "desc",
      align: "center",
    },
    {
      title: "操作",
      align: "center",
      render(d) {
        return (
          <>
            <Button
              type="primary"
              icon={<EditOutlined />}
              onClick={() => {
                setIsModalVisible(true);
                setEditId(d.id);
                setImageUrl(d.coverImage);
                myForm.setFieldsValue({
                  name: d.name,
                  desc: d.desc,
                  content: d.content,
                });
              }}
            />
            <Popconfirm
              okText="是"
              cancelText="否"
              title="是否确认删除？"
              onConfirm={async () => {
                await deleteGong(d.id);
                loadCate();
              }}
            >
              <Button
                type="primary"
                style={{ marginLeft: 7 }}
                danger
                icon={<DeleteOutlined />}
              />
            </Popconfirm>
          </>
        );
      },
    },
  ];
  const loadCate = async () => {
    const res = await loadGong(page);
    console.log(res);
    // console.log(res.data);
    setList(res.data);
    setTotal(res.total);
    console.log(res.data.length);
  };

  useEffect(() => {
    loadCate();
  }, [page]);

  const onFinish = async (values) => {
    if (editId) {
      await updataGong(editId, { ...values, coverImage: imageUrl });
    } else {
      await addGong({ ...values, coverImage: imageUrl });
    }
    setIsModalVisible(false);
    setEditId("");
    message.success("编辑成功");
    loadCate();
  };

  const onFinishFailed = () => {};

  return (
    <Card
      title={<h3>公告列表</h3>}
      extra={
        <Button
          type="primary"
          icon={<PlusOutlined />}
          onClick={() => {
            setIsModalVisible(true);
            setImageUrl("");
          }}
        />
      }
    >
      <Table
        columns={columns}
        dataSource={list}
        rowKey="id"
        pagination={{
          total: total,
          onChange: (page) => {
            setPage(page);
          },
        }}
      ></Table>
      <Modal
        title="编辑"
        visible={isModalVisible}
        destroyOnClose={true}
        onOk={() => {
          myForm.submit();
        }}
        onCancel={() => setIsModalVisible(false)}
        okText="确认"
        cancelText="取消"
      >
        <Form
          preserve={false}
          form={myForm}
          name="basic"
          initialValues={{ remember: true }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
        >
          <Form.Item
            label="名字"
            name="name"
            rules={[{ required: true, message: "请输入名字" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="简介"
            name="desc"
            rules={[{ required: true, message: "请输入简介" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item label="图片">
            <FileUpload imageUrl={imageUrl} setImageUrl={setImageUrl} />
          </Form.Item>
          <Form.Item
            label="详情"
            name="content"
            rules={[{ required: true, message: "请输入详情" }]}
          >
            <TextArea showCount maxLength={200} rows={8} />
          </Form.Item>
        </Form>
      </Modal>
    </Card>
  );
}

export default GaongGao;
